<template>
  <div class="enter">
    <el-row>
        <el-col :span="24"><h3>申请⼊驻Artube平台</h3></el-col>
    </el-row>
    <el-row>
        <el-col :span="24"><h4>⼊驻权益</h4></el-col>
        <el-col :span="24" class="text1">1.⼊驻艺术家可以享受作品上链服务</el-col>
        <el-col :span="24" class="text1">2.⼊驻艺术家可以享受平台版权代办服务</el-col>
        <el-col :span="24" class="text1">3.⼊驻艺术家未来可以在平台销售艺术品和周边商品</el-col>
    </el-row>
    <el-row>
        <el-col :span="24"><h4>申请入驻</h4></el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="80px">
    <el-row class="inp">
      <el-col :span="8"><h5>姓名</h5></el-col>
      <el-col :span="8"><h5>身份证号</h5></el-col>
      <el-col :span="8"><h5>电话</h5></el-col>
      <el-col :span="8"><el-input class="el-inp" v-model="form.realname" placeholder="请输入名字"></el-input></el-col>
      <el-col :span="8"><el-input class="el-inp" v-model="form.idCard" placeholder="请输入身份证"></el-input></el-col>
      <el-col :span="8"><el-input class="el-inp" v-model="form.mobile" placeholder="请输入电话"></el-input></el-col>
    </el-row>


    <el-row>
        <el-col :span="24" class="resume">
          <h4>上传个人简历</h4>
          <p class="p1">支持文件类型:PDF,Docx</p>
        </el-col>
        <el-upload
          class="upload-demo"
          :headers="headers"
          :action="updateAction"
          :on-success="uploadPdf"
          :on-preview="handlePreview"
          :file-list="fileListWork"
          multiple>
          <el-button size="small"  type="primary" v-if="fileListWork.length>0">已上传</el-button>
          <el-button size="small"  v-else>点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传文件pdf、doc文件，最⼤体积:20MB</div>
        </el-upload>
    </el-row>
   

    <el-row>
        <el-col :span="24" class="resume">
          <h4>上传个人作品集</h4>
          <p class="p1">支持文件类型:zip,pdf 最⼤体积:500MB</p>
        </el-col>
        <el-upload
          class="upload-demo"
          drag
          :headers="headers"
          :action="updateAction"
          :on-success="uploadZip"
          :on-preview="handlePreview"
          :file-list="fileListResume"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
    </el-row>

    <el-form-item class="submit" ref="form">
      <el-button type="primary" class="el-submit" @click="onSubmit">提交申请</el-button>
    </el-form-item>
  </el-form>
  </div>

</template>

<script>
import { getToken } from '@/utils/auth'
import Config from "@/utils/config";
import { list,userInfo } from '@/api/settle'
export default {
  data(){
    return{
      updateAction:Config.updateAction,
      headers: {token: getToken('Token') },
      fileListWork: [],
      fileListResume: [],
      list: [],
      form:{
        realname: '',
        idCard:'',
        mobile:''
      }
  }
},
  mounted(){
    this.getUserInfo();
  },
  methods:{
    handlePreview(file){
      window.location.href = file.url
    },

    async getUserInfo(){
      list({}).then((res)=>{
        // console.log('static',res.data.artist);
        let {realname, idCard, mobile} = res.data.user;
        this.form.realname = realname;
        this.form.idCard = idCard;
        this.form.mobile = mobile;
        if(res.data.artist){
          // 单个序列号赋值不起作用
          this.fileListWork = [{name:res.data.artist.work, url:res.data.artist.work}];
          this.fileListResume = [{name:res.data.artist.resume, url:res.data.artist.resume}];

        }
        // console.log('static',this.fileListWork);
      })

    },
    uploadPdf(res,file) {
        if(res.status == 200){
          this.form.work = res.data;
        }
      },
    uploadZip(res,file){
      this.form.resume = res.data;
      // console.log('static',this.form);
    },
    // 提交申请
    async onSubmit() {
      // const {data:res} = await this.$http.post("/api-v2/artist/add",this.form);
      userInfo(this.form).then((res)=>{
        // console.log(res);
        if(res.status == 200){
          this.$message.success('提交成功');
        } else{
          this.$message.error('提交失败');
        }
      })
    }
 }
}
</script>

<style scoped lang="less">
.enter{
  .text1{
    font-size: 12px;
    font-weight: 600;
  }
  .resume{
    .p1{
      font-size: 14px;
      color: #7F8192;
    }
  }
  .inp{
    .el-inp{
      width: 90%;
    }
  }

  .submit{
    .el-submit{
      margin: 30px 0 0 380px;
      width: 30%;
    }
  }
}

</style>